{# empty Twig template #}
{% extends "PyafGymBundle::layout_admin.html.twig" %}

{% block title %} Pyaf {% endblock %}
{% block javascriptsHeader %}
    <style>
        .capaTransparente{position:absolute; height:100%; width:100%; background:#ccc; opacity: 0; filter: alpha(opacity=0); -moz-opacity: 0;}
    </style>

    <!-- multi select plugin -->
    <link rel="stylesheet" href="{{ asset('bootstrap/css/multi-select.css') }}">
    <!-- jQuery -->
    <script src="{{ asset('bootstrap/js/jquery.min.js') }}"></script>    
    <!-- Bootstrap -->
    <script src="{{ asset('bootstrap/js/bootstrap.min.js') }}"></script>    
    <script src="{{ asset('bootstrap/js/jquery.validate.min.js') }}"></script>
    
    <script type="text/javascript">
        
        $(document).ready(function (){
            $.validator.addMethod("password",function(value,element){
                return this.optional(element) || /^[A-Za-z0-9!@#$%^&*()_]{3,16}$/i.test(value);
            },"Passwords de 3-16 caracteres");
            
            $('#formulario').validate({
                rules:{
                    passViejo:{
                        required: true,
                        password: true
                    },
                    passNuevo:{
                        required: true,
                        password: true
                    },
                    passNuevoRepeat:{
                        required: true,
                        equalTo: "#passNuevo"
                    }
                },
                messages:{
                    passViejo:{
                        required: "<div class='text-error'>Campo requerido! <i class='text-error icon-hand-up'></i></div>",
                        password: "<div class='text-error'>Longitud requerida 4-16, o contiene caracteres no permitidos! <i class='text-error icon-hand-up'></i></div>"
                    },
                    passNuevo:{
                        required: "<div class='text-error'>Campo requerido! <i class='text-error icon-hand-up'></i></div>",
                        password: "<div class='text-error'>Longitud requerida 4-16, o contiene caracteres no permitidos! <i class='text-error icon-hand-up'></i></div>"
                    },
                    passNuevoRepeat:{
                        required: "<div class='text-error'>Campo requerido! <i class='text-error icon-hand-up'></i></div>",
                        equalTo: "<div class='text-error'>No coincide con la contraseña anterior! <i class='text-error icon-hand-up'></i></div>",
                        password: "<div class='text-error'>Longitud requerida 4-16, o contiene caracteres no permitidos! <i class='text-error icon-hand-up'></i></div>"
                    }
                },
                onkeyup:false,
                submitHandler: function(form){
                    form.submit();
                },
                invalidHandler: function(){

                }
            });
            
        });   
        
    </script>
{% endblock %}    

{% block tituloSector %}<i class="icon-save"></i> Profesor - Configuración de cuenta (contraseña)  {% endblock %}
{% block nombreSector %} Profesor / Configuración de Cuenta {% endblock %}

{% block dashboardContent %}{% endblock %}

{% block content %}
    <div class="container-fluid" id="content-area" style="padding-right: 30px;">    
        
        {% if app.session.hasFlash('alertaConfiguracionPassSuccess') %}
            <div class="alert alert-success">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ app.session.flash('alertaConfiguracionPassSuccess') }}
            </div>
        {% endif %}
        {% if app.session.hasFlash('alertaConfiguracionPassError') %}
            <div class="alert alert-error">
                <button type="button" class="close" data-dismiss="alert">&times;</button>
                {{ app.session.flash('alertaConfiguracionPassError') }}
            </div>
        {% endif %}

        
        <div class="row-fluid">
        <div class="span12">
            <div class="box">
                <div class="box-head"><i class="icon-save"></i><span>Gestor de datos</span></div>
                <div class="box-body">
                    <div class="span12">
                         <div class="mini-layout">
                            <div class="mini-layout-header">
                                <i class="icon-key"></i>
                                <span>Reestablecer Contraseña</span>
                            </div>
                            <div class="mini-layout-body">
                                <div>
                                    <div style="padding: 20px;">
                                        <legend>Cambiar contraseña de ingreso a <span class="muted">Pyaf</span></legend>
                                        <form name="formulario" id="formulario" accept-charset="UTF-8" action="{{ path('profesores_changepass', {'id': app.user.id}) }}" method="post" class='form-horizontal form-validate'>
                                            
                                            <div class="control-group">
                                                <label for="textfield" class="control-label">Clave actual: </label>
                                                <div class="controls">
                                                    <input class="span3" name="passViejo" id="passViejo" placeholder="Password" type="password" required="true"> 
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="textfield" class="control-label">Clave nueva: </label>
                                                <div class="controls">
                                                    <input class="span3" name="passNuevo" id="passNuevo" placeholder="Password" type="password" required="true"> 
                                                </div>
                                            </div>
                                            <div class="control-group">
                                                <label for="textfield" class="control-label">Clave nueva (repetir): </label>
                                                <div class="controls">
                                                    <input class="span3" name="passNuevoRepeat" id="passNuevoRepeat" placeholder="Password" type="password" required="true"> 
                                                </div>
                                            </div>
                                            <div class="form-actions">
                                                <button class="btn btn-warning" type="submit" id="btnEnviar">Aplicar cambios</button>
                                            </div>
                                            
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
        
    </div>
{% endblock %}
{% block javascripts %}

{% endblock %}